<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="theme-color">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>分享家</title>
    <link rel="stylesheet" type="text/css" href="../lib/css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../lib/css/mui.css"/>
    <link rel="stylesheet" href="../css/util.css">
    <script src="http://at.alicdn.com/t/font_371407_7omis3wrfr7tx1or.js"></script>
</head>
<link rel="stylesheet" href="../css/house_res_list.css">
<body>
<header class="fxj-header">
    <span class="back" onclick="location.replace('../index.html')">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jiantou"></use>
        </svg>
    </span>
    <label id="search-ipt">
        <svg class="icon">
            <use xlink:href="#icon-search-o"></use>
        </svg>
        <input id="searchStr" type="text" placeholder="位置地标/房源标题/房东昵称">
    </label>
</header>

<div id="filter-menu">
    <span @click="toggleTrigonStyle(1)" :class="{'selected-text-color':menuTxt.date!==''}" v-cloak>
        {{menuTxt.date===''?'日期':menuTxt.date}}
        <svg class="icon sanjiaoxing" :class="{clicked:trigon.t1}">
            <use xlink:href="#icon-sanjiaoxing-copy-copy"></use>
        </svg>
    </span>
    <span @click="toggleTrigonStyle(2)" :class="{'selected-text-color':menuTxt.position!=='位置'}" v-cloak>
        {{menuTxt.position}}
        <svg class="icon sanjiaoxing" :class="{clicked:trigon.t2}">
            <use xlink:href="#icon-sanjiaoxing-copy-copy"></use>
        </svg>
    </span>
    <span @click="toggleTrigonStyle(3)" :class="{'selected-text-color':menuTxt.sort!=='排序'}" v-cloak>
        {{menuTxt.sort}}
        <svg class="icon sanjiaoxing" :class="{clicked:trigon.t3}">
            <use xlink:href="#icon-sanjiaoxing-copy-copy"></use>
        </svg>
    </span>
    <span @click="toggleTrigonStyle(4)">
        <span :class="{'selected-text-color':menuTxt.filtrate}">
            筛选
        </span>
        <span class="bubble" v-show="menuTxt.filtrate" v-cloak>{{menuTxt.filtrate}}</span>
        <svg class="icon">
            <use xlink:href="#icon-shaixuan1"></use>
        </svg>
    </span>
</div>

<main id="main">
    <!-- 房源列表 -->
    <div class="house-list-container">
        <div class="a-house" v-for="house of houseList" @click="clickHouseEvent($event,house)">
            <div class="house-show">
                <span class="icon-xin" @click.stop.capture="collectHouse(house)">
                    <svg class="icon" :class="{collected:house.is_collect===1}" aria-hidden="true">
                        <use xlink:href="#icon-collect"></use>
                    </svg>
                </span>
                <img :src="house.img" alt="">
                <span class="money">￥<span v-cloak>{{house.price_low}}</span>/晚</span>
            </div>
            <div>
                <div class="house-name" v-cloak>
                    {{house.title}}
                    <img class="avatar" :src="house.photo" alt="">
                </div>
                <p class="house-des">
                    <span v-cloak>{{house.lease_type}}/可住{{house.people}}人-{{house.score}}分/{{house.comment}}条评论-已定{{house.day}}晚</span>
                </p>
                <div class="label">
                    <span :class="{has:house.seven_rebate||house.thirty_rebate}">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-youhui2"></use>
                        </svg>
                        长租优惠
                    </span>
                    <span :class="{has:house.realshot!=='0'}">
                        <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangji1"></use>
                    </svg>
                        实拍
                    </span>
                    <span :class="{has:house.detect!=='0'}">
                        <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fangwurenzheng"></use>
                    </svg>
                        验真
                    </span>
                </div>
            </div>
        </div>
    </div>
    <!-- 日期 -->
    <section id="side-date-container" class="side-container" :class="{restore:trigon.t1}">
        <div class="side-date side-content">
            <div class="content-container">
                <div class="month" v-for="month of dateList">
                    <h1 v-cloak>{{month.year}}年{{month.month}}月</h1>
                    <ul>
                        <li>日</li>
                        <li>一</li>
                        <li>二</li>
                        <li>三</li>
                        <li>四</li>
                        <li>五</li>
                        <li>六</li>
                    </ul>
                    <div>
                        <span class="day disable" v-for="i of month.week"></span>
                        <span class="day" v-for="day of month.dayList" :class="{selected:day.selected,disable:day.ban}"
                              @click="selectDay(day.index)">
                            <span v-cloak>{{day.today?'今天':day.day}}</span>
                        </span>
                    </div>
                </div>
            </div>
            <footer>
                <span onclick="clearAllSelectedDate()">重置</span>
                <span onclick="finish(1)">完成</span>
            </footer>
        </div>
    </section>
    <!-- 位置 -->
    <section id="side-location-container" class="side-container" :class="{restore:trigon.t2}">
        <div class="side-location side-content">
            <div class="content-container">
                <div class="toggle-show-container" v-for="(term,termI) of screenData.position">
                    <div class="toggle-show-title" @click="toggleScreenTermShow(term)">
                        <span v-cloak>{{term.name}}</span>
                        <svg class="icon" :class="{open:term.show}">
                            <use xlink:href="#icon-arrow-down"></use>
                        </svg>
                    </div>
                    <div class="toggle-show-content" :class="{show:term.show}">
                        <span v-for="item of term.list" :class="{selected:item.selected}"
                              @click="selectScreenItem(item)" v-cloak>{{item.name}}</span>
                    </div>
                    <i class="tieku"></i>
                </div>
            </div>

            <footer>
                <span onclick="clearAllSelectedDate()">重置</span>
                <span onclick="finish(2)">完成</span>
            </footer>
        </div>
    </section>
    <!-- 排序 -->
    <section id="side-sort-container" class="side-container" :class="{restore:trigon.t3}">
        <ul class="side-sort side-content">
            <li :class="{active:selectedSort===1}" @click="selectSort(1)">
                <span>默认排序（日期最新）</span>
                <svg class="icon" v-show="selectedSort===1">
                    <use xlink:href="#icon-guanggaolanyouhua02"></use>
                </svg>
            </li>
            <li :class="{active:selectedSort===2}" @click="selectSort(2)">
                <span>销量优先</span>
                <svg class="icon" v-show="selectedSort===2">
                    <use xlink:href="#icon-guanggaolanyouhua02"></use>
                </svg>
            </li>
            <li :class="{active:selectedSort===3}" @click="selectSort(3)">
                <span>好评优先</span>
                <svg class="icon" v-show="selectedSort===3">
                    <use xlink:href="#icon-guanggaolanyouhua02"></use>
                </svg>
            </li>
            <li :class="{active:selectedSort===4}" @click="selectSort(4)">
                <span>高价优先</span>
                <svg class="icon" v-show="selectedSort===4">
                    <use xlink:href="#icon-guanggaolanyouhua02"></use>
                </svg>
            </li>
            <li :class="{active:selectedSort===5}" @click="selectSort(5)">
                <span>低价优先</span>
                <svg class="icon" v-show="selectedSort===5">
                    <use xlink:href="#icon-guanggaolanyouhua02"></use>
                </svg>
            </li>
        </ul>
    </section>
    <!-- 筛选 -->
    <section id="side-filtrate-container" :class="{restore:filtrateBoxShow}">
        <div class="side-filtrate-close" onclick="closeSideFiltrate()"></div>
        <div class="side-filtrate">
            <div class="content-container">
                <div class="toggle-show-container">
                    <div class="toggle-show-title">
                        <span>出租类型</span>
                    </div>
                    <div class="toggle-show-content show">
                        <span :class="{selected:selectedFilter.rentType===0}"
                              @click="selectFilterItem('rentType',0,false)">整套出租</span>
                        <span :class="{selected:selectedFilter.rentType===1}"
                              @click="selectFilterItem('rentType',1,false)">单间出租</span>
                    </div>
                    <i class="tieku"></i>
                </div>
                <div class="toggle-show-container">
                    <div class="toggle-show-title">
                        <span>房间价格</span>
                        <span style="color: darkorange">{{selectedFilter.price.s?selectedFilter.price.s:'0'}} - {{selectedFilter.price.e?selectedFilter.price.e:'不限'}}￥</span>
                    </div>
                    <div class="toggle-show-content show" id="ipt-price">
                        <input type="text" style="text-align: center" placeholder="0" v-model="selectedFilter.price.s">-<input
                            type="text"
                            placeholder="不限" style="text-align: center"
                            v-model="selectedFilter.price.e">￥
                    </div>
                    <i class="tieku"></i>
                </div>
                <div class="toggle-show-container">
                    <div class="toggle-show-title" @click="toggleFilterItemShow(0)">
                        <span>房屋户型</span>
                        <svg class="icon" :class="{open:filterItemShow[0]}">
                            <use xlink:href="#icon-arrow-down"></use>
                        </svg>
                    </div>
                    <div class="toggle-show-content" :class="{show:filterItemShow[0]}">
                        <span :class="{selected:selectedFilter.houseType===0}"
                              @click="selectFilterItem('houseType',0,false)">不限</span>
                        <span :class="{selected:selectedFilter.houseType===1}"
                              @click="selectFilterItem('houseType',1,false)">一室</span>
                        <span :class="{selected:selectedFilter.houseType===2}"
                              @click="selectFilterItem('houseType',2,false)">两室</span>
                        <span :class="{selected:selectedFilter.houseType===3}"
                              @click="selectFilterItem('houseType',3,false)">三室</span>
                        <span :class="{selected:selectedFilter.houseType===4}"
                              @click="selectFilterItem('houseType',4,false)">四室</span>
                        <span :class="{selected:selectedFilter.houseType===5}"
                              @click="selectFilterItem('houseType',5,false)">四室以上</span>
                    </div>
                    <i class="tieku"></i>
                </div>
                <div class="toggle-show-container">
                    <div class="toggle-show-title" @click="toggleFilterItemShow(1)">
                        <span>设施服务（多选）</span>
                        <svg class="icon" :class="{open:filterItemShow[1]}">
                            <use xlink:href="#icon-arrow-down"></use>
                        </svg>
                    </div>
                    <div class="toggle-show-content" :class="{show:filterItemShow[1]}">
                        <span :class="{selected:facility.selected}" @click="selectFilterItem('facility',facility,true)"
                              v-for="facility of screenData.filter" class="icon-container">
                            <svg class="icon">
                                <use :xlink:href="'#'+facility.style"></use>
                            </svg>
                            {{facility.name}}
                        </span>
                    </div>
                    <i class="tieku"></i>
                </div>
                <div class="toggle-show-container">
                    <div class="toggle-show-title">
                        <span>可住人数</span>
                        <span class="people-num">
                            <span class="jian" @click="changePeopleNum(-1)">
                                <svg class="icon">
                                    <use xlink:href="#icon-jian"></use>
                                </svg>
                            </span>
                            <span>{{selectedFilter.peopleNum}}人</span>
                            <span class="jia" @click="changePeopleNum(1)">
                                <svg class="icon">
                                    <use xlink:href="#icon-jia2"></use>
                                </svg>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
            <footer>
                <span @click="resetFilterItem">重置</span>
                <span onclick="finish(4)">完成</span>
            </footer>
        </div>
    </section>
    <div id="loadMore"></div>
</main>

<script type="text/javascript" src="../lib/js/babel-polyfill.js"></script>
<script type="text/javascript" src="../lib/js/vue.js"></script>
<script type="text/javascript" src="../lib/js/mui.js"></script>
<script type="text/javascript" src="../lib/js/jquery.js"></script>
<script type="text/javascript" src="../script/util.js"></script>

<script src="../script/house_res_list.js"></script>
</body>
</html>